import { Flag } from "../Icon/Flag";
import { observer } from "mobx-react-lite";
import { useStore } from "../../store";
import { emitter } from "../../eventEmitter";
import { CurModeColor, UnActiveModeColor } from "./Common";

const Scale = observer((props: any) => {
    const { transformBarStore, toolBarStore } = useStore();
    const scaleX = (e: any) => {
        transformBarStore.setScaleX(e.target.valueAsNumber);
    };

    const scaleY = (e: any) => {
        transformBarStore.setScaleY(e.target.valueAsNumber);
    };

    const handleKeyDown = (e: any, action: string) => {
        if (e.key == "Enter") {
            e.target.blur();
        }
    };

    const blurHandler = (e: any) => {
        emitter.emit("updateTransform", transformBarStore.transformData);
    }

    const clickHandler = (e: any) => {
        toolBarStore.setCurMode("select");
        if (transformBarStore.mode === "scale") {
            transformBarStore.setMode("transform");
            emitter.emit("changeTransformModeType", "transform");
        } else {
            transformBarStore.setMode("scale");
            emitter.emit("changeTransformModeType", "scale");
        }
    };

    return (
        <div className="flex space-x-1">
            <svg className="w-5 h-5 hover:bg-gray-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
                onClick={clickHandler}
            >
                <g id="SVGRepo_bgCarrier" strokeWidth="0">
                </g>
                <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round">
                </g><g id="SVGRepo_iconCarrier">
                    <path fillRule="evenodd" clipRule="evenodd" d="M15.9323 9.48196C15.9764 9.64718 16 9.82084 16 10V19C16 20.1046 15.1046 21 14 21H5C3.89543 21 3 20.1046 3 19V10C3 8.89543 3.89543 8 5 8H14C14.1792 8 14.3528 8.02356 14.518 8.06774L17.5858 5H16C15.4477 5 15 4.55228 15 4C15 3.44772 15.4477 3 16 3H20C20.5523 3 21 3.44772 21 4V8C21 8.55228 20.5523 9 20 9C19.4477 9 19 8.55228 19 8V6.41421L15.9323 9.48196ZM14 19H5V10H14V19Z"
                        fill={transformBarStore.mode == "scale" ? CurModeColor : UnActiveModeColor}
                    >
                    </path>
                </g>
            </svg>
            <input
                type="number"
                className="rounded-sm border-gray-200 shadow-sm p-0 text-white w-16 bg-[#000c18] text-sm"
                value={transformBarStore.transformData.scaleX}
                onChange={scaleX}
                onBlur={blurHandler}
                onKeyDown={(e) => handleKeyDown(e, "scaleX")}
            />
            <div>
                <input
                    type="number"
                    className="rounded-sm border-gray-200 shadow-sm p-0 text-white w-16 bg-[#000c18] ml-4 text-sm"
                    value={transformBarStore.transformData.scaleY}
                    onChange={scaleY}
                    onBlur={blurHandler}
                    onKeyDown={(e) => handleKeyDown(e, "scaleY")}
                />
            </div>
            <Flag></Flag>
        </div>

    );
});

export { Scale };

